<template>
	<view style="height: 100%">
		<Nav title="项目" :leftIconColor="'#FFF'" @onClickRight="clickRight" />
		<view class="projectList">
			<view class="pageLeft">
				<view class="leftItem" v-for="item in leftMenu" :key="item.key" @click="handleLeft(item.key)">
					<view :class="item.key==leftKey?'block active':'block'">
						<image :src="item.srcUrl" mode="aspectFit"></image>
						<view class="" style="font-size: 12px;">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<view class="pageRight">
				<scroll-view scroll-y="true" :style="{height: height+'px'}" @scrolltolower="lower">
					<view class="list">
						<view class="rightItem" @click="handleRightAdd" style="height: 80rpx;">
							<view class="add">
								<uni-icons type="plusempty" style="font-size: 80rpx;color: #999;"></uni-icons>
							</view>
						</view>
						<view class="rightItem" v-for="item in data" :key="item.Id" @click="handleRight(item)">
							<view class="title">
								<view class="text">
									<text class="t">{{item.ProjectName||item.Name}}</text>
									<view @click.stop="changeName(item)">
										<uni-icons type="compose" color="#007aff"></uni-icons>
									</view>
								</view>
								<view v-if="leftKey==3" @click.stop="handleRightDel(item)">
									<uni-icons type="trash" class="color" color="#e43d33"></uni-icons>
								</view>
								<view v-else>
									<uni-icons type="trash" class="color" color="#fff"></uni-icons>
								</view>
							</view>
							<view class="userInfo">

								<view>
									<view>{{item.ProjectCreatorRealName||item.CreatorRealName}}</view>
									<view class="time" style="">{{item.CreateTime.substring(0,19)}}</view>
								</view>

								<view class="star" @click.stop="starProject(item)" style="height: 22px;width: 22px;">
									<image v-if="item.IsCollect&&leftKey != 4" src="/static/star1.png" mode="aspectFit">
									</image>
									<image v-else-if="!item.IsCollect&&leftKey != 4" src="/static/star.png"
										mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
					<!-- <uni-load-more iconType="circle" :status="this.data.length >= this.total?'moMore':'loading'" /> -->
					<!-- 上拉显示更多 -->
					<view class="">
						<uniLoadMore :status="status" :contentText="contentText" :rows="data"></uniLoadMore>
					</view>
				</scroll-view>
			</view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog cancelText="取消" confirmText="确定" title="新建项目" type="info" :value="formData.Name"
					@close="$refs.inputDialog.close()" @confirm="dialogInputConfirm" before-close>

					<uni-forms :modelValue="formData" label-position="top" ref="form" :rules="rules">
						<uni-forms-item label="项目名称" name="Name" required>
							<uni-easyinput type="text" v-model="formData.Name" placeholder="请输入项目名称" />
						</uni-forms-item>
						<uni-forms-item label="参与人员" name="name" :label-width="80">
							<p style="width: 100%;height: 100%;display: flex;align-items: center;"><button
									@click="$refs.PopupCheckboxs.open('noProjectID')" size="mini" style="width: 100%;"
									plain type="primary">添加</button>
							</p>
						</uni-forms-item>
						<view class="tag-view" style="display: flex;flex-wrap: wrap;">
							<uni-tag :text="item.NickName||item.Name" type="primary" v-for="item in userList"
								:key="item.Id" inverted style="margin-right: 5px;margin-bottom: 5px;" />
						</view>
					</uni-forms>
				</uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="namePopup" type="dialog">
				<uni-popup-dialog mode="input" title="项目名称" :value="selectItem.Name" placeholder="请输入项目名称"
					@confirm="changeNameConfirm"></uni-popup-dialog>
			</uni-popup>
			<PopupCheckboxs ref="PopupCheckboxs" @subclickRow="subclickRow"></PopupCheckboxs>
		</view>

	</view>
</template>

<script>
	import Nav from '@/components/BackTabBar.vue'
	import PopupCheckboxs from './cPage/PopupCheckboxs.vue'
	// 引入加载更多
	import uniLoadMore from '@/components/uni-load-more.vue'
	import {
		getNowDate
	} from '../../utils/tools.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		components: {
			PopupCheckboxs,
			Nav,
			uniLoadMore
		},
		onNavigationBarButtonTap(e) {
			console.log(e)
			uni.navigateTo({
				url: '/pages/user/user'
			})
			return true;
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '',
					contentrefresh: '加载中',
					contentnomore: '没有更多了'
				},
				rules: {
					Name: {
						rules: [{
							required: true,
							errorMessage: '请输入项目名称',
						}]
					},
					apk: {
						rules: [{
							required: true,
							errorMessage: '请选择应用',
						}]
					},
				},
				formData: {},
				data: [],
				leftMenu: [{
					title: '全部项目',
					key: '1',
					srcUrl: "/static/all.png",

				}, {
					title: '参与项目',
					key: '2',
					srcUrl: "/static/cyu.png",
				}, {
					title: '我的项目',
					key: '3',
					srcUrl: "/static/my.png",
				}, {
					title: '收藏项目',
					key: '4',
					srcUrl: "/static/scang.png",
				}],
				leftKey: '1',
				userInfo: {},
				pagination: {
					PageIndex: 1,
					PageRows: 10,
					SortField: "CreateTime",
					SortType: "desc",
				},
				total: 0,
				queryParam: {},
				userList: [],
				listUrl: 'Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeList',
				selectItem: {},
				nameObj: {},
				height: 800
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.queryParam = {
				UserId: this.userInfo.Id,
				ClassType: 0
			};
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					// 可使用高度减去系统状态栏高度减去自定义导航高度
					this.height = res.windowHeight - res.statusBarHeight - 44
				}
			})
		},
		onShow() {
			this.getUnreadTotal()
			this.getDataList()
		},
		methods: {
			...mapActions(['getUnreadTotal']),
			clickRight() {
				uni.navigateTo({
					url: '/pages/user/user'
				})
			},
			// 更改项目名称
			changeName(item) {
				console.log(item);
				this.selectItem = item
				this.$refs.namePopup.open()
				this.$http('Base_ProjectWork/Base_Project/GetTheData', {
					id: item.ProjectId || item.Id
				}).then(res => {
					if (res.Success) this.nameObj = res.Data
				})
			},
			changeNameConfirm(e) {
				if (!e) return uni.showToast({
					icon: 'none',
					title: '请填写项目名称'
				})
				this.nameObj.Name = e
				this.$http('Base_ProjectWork/Base_Project/SaveData', this.nameObj).then(res => {
					if (res.Success) {
						this.getDataList()
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						})
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			},
			// 选择参与人
			subclickRow(row) {
				console.log(row);
				this.userList = row
			},
			// 下拉加载
			lower() {
				if (this.data.length >= this.total) {
					this.status = "noMore"
					return
				}
				this.status = "loading"
				// uni.showLoading()
				this.pagination.PageIndex++
				this.$http(this.listUrl, {
						...this.pagination,
						Search: this.queryParam,
					})
					.then((res) => {
						uni.hideLoading()
						if (res.Success) {
							this.data = this.data.concat(res.Data)
							this.total = res.Total
							if (this.data.length >= this.total) {
								this.status = "noMore"
								return
							}
						} else {
							// uni.hideLoading()
							this.status = "noMore"
						}
					});
			},
			// 左侧菜单点击
			handleLeft(key) {
				if (this.leftKey == 4) this.data = []
				this.leftKey = key
				this.pagination.PageIndex = 1
				this.total = 0
				if (this.leftKey == '3') this.listUrl = 'Base_ProjectWork/Base_Project/GetProjectList'
				else if (this.leftKey == '4') this.listUrl = 'Base_ProjectWork/Base_ProjectCollect/GetProjectCollectList'
				else if (this.leftKey == 2) {
					this.queryParam.ClassType = 1
					this.listUrl = 'Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeList'
				} else {
					this.queryParam.ClassType = 0
					this.listUrl = 'Base_ProjectWork/Base_ProjectPartake/GetProjectPartakeList'
				}
				this.getDataList()
			},
			// 右侧项目添加
			handleRightAdd() {
				this.$refs.inputDialog.open()
				this.userList = []
				this.$set(this.formData, 'Name', this.userInfo.Name + getNowDate().split(' ')[0] + '创建')
			},
			dialogInputConfirm(e) {
				console.log('确定了', e);
				this.$refs.form.validate().then(res => {
					uni.showLoading()
					this.$http('Base_ProjectWork/Base_Project/SaveData', {
						...this.formData,
						ProUserList: this.userList.map(item => {
							return {
								UserId: item.MailUserId,
								UserName: item.Name,
								PhoneNumber: item.Phone,
								CreateTime: item.CreateTime
							}
						})
					}).then(res => {
						uni.hideLoading()
						if (res.Success) {
							this.$refs.inputDialog.close()
							console.log('获取添加成功后的项目结果', res.Data)
							// 更新列表
							this.getDataList()
							uni.navigateTo({
								url: '/pages/List/cPage/projectToPage?obj=' + JSON.stringify(res
									.Data)
							})

						} else {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})

			},
			// 保存用户
			saveUser(pid) {
				this.userList.forEach(async item => {
					await this.$http('Base_ProjectWork/Base_ProjectPartake/SaveData', {
						ProjectId: pid,
						userId: item.Id
					}).then(res => {
						console.log(res);
					})
				})
			},
			// 右侧项目删除
			handleRightDel(item) {
				let url = ''
				if (this.leftKey == 2) {
					uni.showModal({
						title: '提示',
						content: '此操作将退出当前项目,确认继续吗?',
						success: (val) => {
							if (val.cancel) return
							this.$http('Base_ProjectWork/Base_ProjectPartake/DeleteProjectPartakeUserData', {
								"UserId": '',
								"PartakeUserId": this.userInfo.Id,
								"ProjectId": item.ProjectId
							}).then(res => {
								uni.hideLoading()
								if (res.Success) {
									this.getDataList()
									uni.showToast({
										icon: 'none',
										title: '操作成功'
									})
								} else {
									uni.hideLoading()
									uni.showToast({
										icon: 'none',
										title: res.Msg
									})
								}
							})
						},
					})
					return
				}
				if (this.leftKey == 3) url = 'Base_ProjectWork/Base_Project/AppDeleteData' // 我的
				else if (this.leftKey == 4) url = 'Base_ProjectWork/Base_ProjectCollect/ProjectCollectDeleteData ' // 收藏
				uni.showModal({
					title: '提示',
					content: '此操作将删除当前项目,确认删除吗?',
					success: (val) => {
						if (val.cancel) return
						this.$http(url, [item.Id]).then(res => {
							if (res.Success) {
								this.getDataList()
								uni.showToast({
									icon: 'none',
									title: '操作成功'
								})
							} else {
								uni.showToast({
									icon: 'none',
									title: res.Msg
								})
							}
						})
					}
				})
			},
			// 右侧跳转
			handleRight(item) {
				console.log('当前行', item)
				uni.navigateTo({
					// url: '/pages/List/cPage/projectToPage?obj=' + JSON.stringify(item)
					url: `/pages/List/cPage/projectToPage?ProjectId=${item.ProjectId||item.Id}`
				})
			},
			// 收藏项目
			starProject(item) {
				console.log('收藏项目前', item, item.ProjectId, item.UserId)

				if (item.IsCollect) {
					this.$http("Base_ProjectWork/Base_ProjectCollect/DeleteDataByCondition",
							[{
									"Condition": "ProjectId",
									"Keyword": (this.leftKey == 1 || this.leftKey == 2) ? item.ProjectId : item.Id
								},
								{
									"Condition": "UserId",
									"Keyword": this.userInfo.Id
								}
							]
						)
						.then((res) => {
							if (res.Success) {
								item.IsCollect = false;
								console.log('收藏项目11', item)
								uni.showToast({
									icon: 'none',
									title: '取消收藏成功'
								})
							} else uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						});
				} else {
					this.$http("Base_ProjectWork/Base_ProjectCollect/SaveData", {
							ProjectId: item.ProjectId || item.Id,
							UserId: item.UserId || item.ProjectCreatorId || item.CreatorId,
						})
						.then((res) => {
							if (res.Success) {
								item.IsCollect = true;
								console.log('收藏项目22', item)
								uni.showToast({
									icon: 'none',
									title: '操作成功'
								})
							} else uni.showToast({
								icon: 'none',
								title: res.Msg
							})
						});
				}

			},
			getDataList() {
				// 检查网络设置，，是否存在网络   设置加载提示  避免后续再没有网络条件下，，接口频繁请求  导致  一直存在正在加载的提示框的问题  只有有网络的情况下去加载
				uni.getNetworkType({
					success: (res) => {
						console.log('获取网络状态', res)
						if (res.networkType === "none") {
							console.log("当前无网络");

							uni.showToast({
								title: '当前网络信号异常',
								icon: "none"
							});
							this.status = "noMore"
						} else {
							console.log("有网络");
							this.status = "loading"
						}
					}
				})
				this.data = []
				// this.status="loading" 
				this.pagination.PageIndex = 1
				this.$http(this.listUrl, {
						...this.pagination,
						Search: this.queryParam,
					})
					.then((res) => {
						if (res.Success) {
							if (res.Data.length == 0) {
								this.status = "noMore"
								return
							}
							this.data = res.Data;
							this.total = res.Total
							if (this.data.length >= this.total) {
								this.status = "noMore"
								return
							}
						} else {
							this.status = "noMore"
						}
					});
			},
		}
	}
</script>

<style scoped lang="scss">
	.projectList {
		// padding-top: 40px;
		display: flex;
		// height: 100%;
		box-sizing: border-box;

		.pageLeft {
			width: 200rpx;
			padding: 20rpx;
			padding-top: 0;
			box-sizing: border-box;

			.leftItem {
				text-align: center;
				padding: 10rpx 0;

				.block {
					width: 130rpx;
					height: 120rpx;
					margin: 0 auto;
					border-radius: 20rpx;
					box-sizing: border-box;
					padding: 10rpx 0;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}

				.active {
					background-color: #f0f0f0;
				}
			}
		}

		.pageRight {
			flex: 1;
			box-sizing: border-box;
			height: 100%;

			.list {
				padding: 10rpx 0;
			}

			.rightItem {
				width: 80%;
				// height: 130rpx;
				background-color: #fff;
				box-shadow: 0 1px 3px 2px rgba(0, 0, 0, 0.1);
				margin: 0 auto;
				margin-bottom: 30rpx;
				box-sizing: border-box;
				padding: 15rpx;
				border-radius: 20rpx;

				.add {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.title {
					font-size: 14px;
					font-weight: bold;
					font-weight: 600;
					display: flex;
					justify-content: space-between;

					.text {
						flex: 1;
						display: flex;
						padding-right: 20rpx;

						.t {
							width: 320rpx;
							// overflow: hidden;
							// white-space: nowrap;
							// text-overflow: ellipsis;
						}
					}

					.color {
						width: 60rpx;
					}
				}

				.userInfo {
					display: flex;
					justify-content: space-between;
					align-items: center;

					font-size: 12px;

					.user {
						flex: 1;
						display: flex;
						justify-content: space-between;
						padding-right: 15px;
					}

					.time {
						color: #999;
					}

					.star {
						width: 22px;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	/deep/.uni-dialog-content {
		display: block;
	}
</style>